<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Flat UI - Free Bootstrap Framework and Theme</title>

    <meta name="description"
          content="Flat UI Kit Free is a Twitter Bootstrap Framework design and Theme, this responsive framework includes a PSD and HTML version."/>

    <meta name="viewport" content="width=1000, initial-scale=1.0, maximum-scale=1.0">

    <!-- Loading Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Loading Flat UI -->
    <link href="css/flat-ui.css" rel="stylesheet">
    <link href="css/demo.css" rel="stylesheet">

    <link rel="shortcut icon" href="img/favicon.ico">

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
    <!--[if lt IE 9]>
    <script src="js/html5shiv.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->

    <script src="js/jquery.min.js"></script>
    <style>
        .black_overlay{  display: none;  position: absolute;  top: 0%;  left: 0%;  width: 100%;  height: 100%;  background-color: black;  z-index:1001;  -moz-opacity: 0.8;  opacity:.80;  filter: alpha(opacity=80);  }  .white_content {  display: none;  position: absolute;  top: 25%;  left: 25%;  width: 50%;  height: 50%;  padding: 16px;  border: 16px solid orange;  background-color: white;  z-index:1002;  overflow: auto;  }
    </style>

    <!-- js -->
    <script type="text/javascript">

        var url = "http://localhost:8076/";
        function login() {
            var data ={};
            data.name =$("#name").val();
            data.password =$("#password").val();
            $.ajax({
                type: 'POST',
                url: url+"loginServer/login",
                data: JSON.stringify(data),
                success: function (data) {

                    alert(data);
                   console.log(data);
                }
            });

            window.location= "html/chart.html";

        }

        function openDialog(){
            document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'
        }
        function register() {
            openDialog()

        }
        function register0(){

            $.ajax({
                type: 'POST',
                url: url+"loginServer/register",
                data: data,
                success: function () {


                }
            });
        }


    </script>

</head>
<body>
<div class="container">
    <!--<div class="demo-headline">-->
    <!--<h1 class="demo-logo">-->
    <!--<div class="logo"></div>-->
    <!--Flat UI-->
    <!--<small>Free User Interface Kit</small>-->
    <!--</h1>-->
    <!--</div>-->
    <!-- /demo-headline -->


    <div class="login">
        <div class="login-screen">
            <div class="login-icon">
                <img src="img/icon.png" alt="Welcome to Mail App"/>
                <h4>Welcome to
                    <small>goChart App</small>
                </h4>
            </div>

            <div class="login-form">
                <div class="form-group">
                    <input type="text" class="form-control login-field" value="" placeholder="Enter your name"
                           id="name"/>
                    <label class="login-field-icon fui-user" for="name"></label>
                </div>

                <div class="form-group">
                    <input type="password" class="form-control login-field" value="" placeholder="Password"
                           id="password"/>
                    <label class="login-field-icon fui-lock" for="password"></label>
                </div>
                <span style="color: red;display: none" id='error'>账户/密码错误！</span>
                <a class="btn btn-primary btn-lg btn-block" onclick="login()" href="#">登陆</a>

                <a class="btn btn-primary btn-lg btn-block" onclick="register()" href="#">注册</a>
                <!--<a class="login-link" href="#">Lost your password?</a>-->
            </div>
        </div>
    </div>

    <div id="light" class="white_content">
        This is the lightbox content.
        <a href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">
            Close</a></div>
    <div id="fade" class="black_overlay">
    </div>